<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="page/followup/css/reserve/list.css" />
    </head>
    <body>
        <div id="root">
            <div class="wrapper">
                <div class="re-header">已预约患者列表</div>
                <div class="re-search">
                    <el-form ref="form" :model="search">
                        <el-row>
                            <el-col span="4">
                                <el-form-item label="姓名">
                                    <el-input placeholder="请输入姓名" v-model="search.name" size="small" class="re-input" />
                                </el-form-item>
                            </el-col>

                            <el-col span="4">
                                <el-form-item label="联系方式">
                                    <el-input placeholder="请输入联系方式" v-model="search.phone" size="small" class="re-input" />
                                </el-form-item>
                            </el-col>

                            <el-col span="4">
                                <el-form-item label="预约状态">
                                    <el-select v-model="search.status" size="small" placeholder="请选择状态" class="re-input" >
                                        <el-option label="进行中" value="1" />
                                        <el-option label="已完成" value="2" />
                                        <el-option label="已过期" value="3" />
                                        <el-option label="待确认" value="4" />
                                      </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col span="9">
                                <el-form-item label="预约日期">
                                    <el-date-picker
                                        v-model="search.date"
                                        size="small"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>

                            <el-col span="3">
                                <el-button type="primary" :loading="search.loading" size="small" @click="handleSearch">搜索</el-button>
                                <el-button size="small" @click="handleReset">重置</el-button>
                            </el-col>

                        </el-row>
                    </el-form>
                </div>

                <div class="table-wrapper">
                    <el-table v-loading="table.loading" :data="table.data" :border="true" style="width: 100%">
                        <el-table-column
                            prop="No"
                            align="center"
                            width="80"
                            label="序号" />
                        <el-table-column
                            prop="userName"
                            align="center"
                            label="姓名" />
                        <el-table-column
                            prop="date"
                            align="center"
                            label="性别">
                            <template slot-scope="scope">
                                {{ scope.row.gender == 'M' ? '男' : '女' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="phone"
                            align="center"
                            label="联系电话" />
                        <el-table-column
                            prop="appointTime"
                            align="center"
                            label="预约日期" />
                        <el-table-column
                            prop="date"
                            align="center"
                            label="预约状态">
                            <template slot-scope="scope">
                                {{ judgeStatus(scope.row.status) }}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            prop="date"
                            align="center"
                            label="预约任务" /> -->
                        <el-table-column
                            prop="date"
                            align="center"
                            label="预约类型">
                            <template slot-scope="scope">
                                {{ scope.row.appointType == 1 ? '医生标记预约' : '患者自主预约' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="createTime"
                            align="center"
                            label="创建时间" />
                        <!-- <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                            <template slot-scope="scope">
                              <el-button
                                type="text"
                                size="small">
                                详情
                              </el-button>
                            </template>
                          </el-table-column> -->
                    </el-table>
                </div>

                <div class="re-footer">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        @current-change="handleChangePage"
                        :total="table.total">
                    </el-pagination>
                </div>

            </div>
        </div>
    </body>
    <script src="scprit/followup/app/reserve/list.js"></script>
</html>